<template>
    <main class="page-bg" id="canvasDom">
        <n-flex vertical justify="flex-center" :warp="true">
            <header class="header flex-between">
                <section class="head-left flex-end">
                    <!-- <ScreenshotKit :downloadName="'设备管理系统'" /> -->
                    <section class="flex-start"><n-icon size="24" color="#ffffff" style="margin-right: 5px;"><DesktopOutline /></n-icon>设备管理</section>
                    <section class="flex-start"><n-icon size="24" color="#ffffff" style="margin-right: 5px;"><Settings /></n-icon>系统管理</section>
                </section>
                <section class="head-right flex-start">
                    <n-badge :value="value" :max="15" style="margin: 0 40px;">
                        <n-icon size="24" color="#ffffff"><Mail /></n-icon>
                    </n-badge>
                    <n-badge :value="value" :max="15" style="margin-right: 40px;">
                        <n-icon size="24" color="#ffffff"><NotificationsSharp /></n-icon>
                    </n-badge>
                    <n-avatar
                        round
                        size="medium"
                        src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                        style="margin-right: 10px;"
                    />
                    <span>吾皇万万岁</span>
                </section>
            </header>
            <header class="header-two flex-between">
                <n-grid :x-gap="8" :cols="2">
                    <n-gi class="header-two-title flex-start"><span>{{today}}</span></n-gi>
                    <n-gi class="btn-box flex-end">
                        <n-button class="text-btn" color="#ffffff" text>设备导入</n-button>
                        <n-button class="text-btn" color="#ffffff" text>设备修改</n-button>
                        <n-button class="text-btn" color="#ffffff" text>设备审核</n-button>
                        <n-button class="text-btn" color="#ffffff" text>设备查询</n-button>
                        <n-button class="text-btn" color="#ffffff" text>设备信息导出</n-button>
                        <n-button class="text-btn" color="#ffffff" text>设备信息同步</n-button>
                    </n-gi>
                </n-grid>
            </header>
            <main class="main-box">
                <section class="main-first">
                    <n-grid :x-gap="16" :cols="3">
                        <n-gi>
                            <n-flex vertical justify="flex-center" :warp="true">
                                <section class="card-info">
                                    <n-grid :x-gap="8" :cols="2">
                                        <n-gi class="flex-start">
                                            <n-icon size="30" color="#ffffff"><CreateOutline /></n-icon>设备录入
                                        </n-gi>
                                        <n-gi class="num-text"><span>1256</span><span>/个</span></n-gi>
                                    </n-grid>
                                </section>
                                <section class="card-info2">
                                    <n-grid :x-gap="8" :cols="2">
                                        <n-gi class="flex-start"><n-icon size="30" color="#ffffff"><PersonOutline /></n-icon>用户管理</n-gi>
                                        <n-gi class="num-text"><span>680</span><span>/人</span></n-gi>
                                    </n-grid>
                                </section>
                            </n-flex>
                        </n-gi>
                        <n-gi>
                            <section class="main-first-text">
                                <header class="main-first-head">最近同步记录</header>
                                <section class="main-first-row flex-between" v-for="i in 5" :key="i">
                                    <p>嘉兴打印机设备信息录入</p>
                                    <p>2024-6-26</p>
                                </section>
                            </section>
                        </n-gi>
                        <n-gi>
                            <section class="main-first-text">
                                <header class="main-first-head">待审核设备记录</header>
                                <section class="main-first-row flex-between" v-for="i in 5" :key="i">
                                    <p>宝来投影仪设备入库审核</p>
                                    <p>2024-6-28</p>
                                </section>
                            </section>
                        </n-gi>
                    </n-grid>
                </section>
                <section class="main-second">
                    <n-grid :x-gap="16" :cols="3" item-responsive responsive="screen">
                        <n-grid-item class="main-second-one"><LoopPie v-if="show" :canvasHeight="300" :data="loopPieData" /></n-grid-item>
                        <n-grid-item span="0 m:1 l:2" class="main-second-one">
                            <StackBar v-if="show" :canvasHeight="300" :data="stackBarData" />
                        </n-grid-item>
                    </n-grid>
                </section>
                <section class="main-fourth">
                    <n-grid :x-gap="16" :cols="4">
                        <n-gi>
                            <section class="row-four">
                                <FunnelDiagram v-if="show" :canvasHeight="260" :data="funnelData" />
                            </section>
                        </n-gi>
                        <n-gi><section class="row-four">
                            <GaugeDiagram v-if="show" :canvasHeight="260" :data="guageData" />
                        </section></n-gi>
                        <n-gi><section class="row-four">
                            <GaugeTwoDiagram v-if="show" :canvasHeight="260" :data="guageData2" />
                        </section></n-gi>
                        <n-gi><section class="row-four">
                            <PieDiagram v-if="show" :canvasHeight="260" :data="bpData" />
                        </section></n-gi>
                    </n-grid>
                </section>
                <section class="main-firth">
                    <n-grid :x-gap="16" :cols="3" item-responsive responsive="screen">
                        <n-grid-item span="0 m:1 l:2"><section class="main-second-one">
                            <n-data-table 
                                size="small"
                                :columns="columns" 
                                :data="data" 
                                :bordered="false"
                                :scroll-x="800"
                                :style="{ height: `${theight}px` }"
                                flex-height
                                :row-class-name="rowClassName"
                            />
                        </section></n-grid-item>
                        <n-grid-item><section class="main-second-one">
                            <StackLineArea v-if="show" :canvasHeight="300" :data="slaData"  />
                        </section></n-grid-item>
                    </n-grid>
                </section>
                <section class="main-third">
                    <n-grid :x-gap="16" :cols="6">
                        <n-grid-item v-for="i in 6" :key="i">
                            <section class="quick-box flex-start" :style="{'background-color':active === i ? bgIcons[i] : ''}">
                                <section class="flex-center" :style="{'background-color': bg(i)}">
                                    <n-icon size="28" :color="active === i ? bgIcons[i] : bgIcons[0]"><Construct /></n-icon>
                                </section>
                                <section>
                                    <n-flex vertical justify="flex-start" :warp="true">
                                        <span>设备导入{{ i }}</span>
                                        <span class="sub-text">Input of Equipment</span>
                                    </n-flex>
                                </section>
                            </section>
                        </n-grid-item>
                    </n-grid>
                </section>
            </main>
        </n-flex>
    </main>
</template>

<script setup lang="ts">
import { ref, reactive,h } from 'vue'
import { DATEFORMAT } from '@/tools/GrobalTools'
import { CreateOutline, PersonOutline,CreateSharp,DesktopOutline,Settings,Mail,NotificationsSharp,Construct } from '@vicons/ionicons5'
import LoopPie from '@/components/charts6/LoopPie.vue'
import StackBar from '@/components/charts6/StackBar.vue';
import FunnelDiagram from '@/components/charts6/FunnelDiagram.vue';
import GaugeDiagram from '@/components/charts6/GaugeDiagram.vue';
import GaugeTwoDiagram from '@/components/charts6/GaugeTwoDiagram.vue';
import StackLineArea from '@/components/charts6/StackLineArea.vue';
import PieDiagram from '@/components/charts6/PieDiagram.vue';
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
import { NTag, NButton, useMessage } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'

const show = ref(false)
const today = ref(DATEFORMAT(new Date().getTime(), 'yyyy年MM月dd日 HH:mm:ss'))
const active = ref(1)
const value = ref(5)
const bgIcons = ref(['#ffffff','#1d89e4', '#31bfdb', '#7c6ec3', '#ffb436', '#f1526f', '#2689e0'])
let loopPieData = reactive({
    seriesDataList: []
})
let stackBarData = reactive({
    xAxisDataList: [],
    seriesDataList: [] 
})
let funnelData = reactive({
    seriesDataList: [] 
})
let guageData = reactive({
    seriesDataList: [] 
})
let guageData2 = reactive({
    seriesDataList: [] 
})
let slaData = reactive({
    xAxisDataList: [],
    seriesDataList: [] 
})
let bpData = reactive({
    seriesDataList: [] 
})
type RowData = {
  key: number,
  name: string,
  age: number,
  address: string,
  tags: string[]
}
const max = 500
const min = 1
let data = reactive(<Array<object>>[])
let columns = reactive(<TableColumn<RowData>>[]) 
let theight = ref(300)

const createColumns = ():DataTableColumns<RowData> => {
  return [
    { title: '设备名称', key: 'name', width: 120},
    { title: '设备类型', key: 'type', width: 80 },
    { title: '所在位置', key: 'address',ellipsis: { tooltip: true } },
    { title: '入库状态', key: 'tags',
      render (row) {
        const tags = row.tags.map((tagKey) => {
          return h(
            NTag,
            {
              style: {
                marginRight: '6px',
                color: '#fff'
              },
              type: 'info',
              bordered: false
            },
            {
              default: () => tagKey
            }
          )
        })
        return tags
      }
    },
    { title: '操作', key: 'actions',
      render (row) {
        return [h(
          NButton,
          {
            size: 'small',
            color: '#28e7de',
            textColor: '#253954',
            style: {
                marginRight: '10px',
            },
            onClick: () => {}
          },
          { default: () => '审核' }
        ),h(
          NButton,
          {
            size: 'small',
            color: '#28e7de',
            textColor: '#253954',
            onClick: () => {}
          },
          { default: () => '入库' }
        )]
      }
    }
  ]
}
const bg = (i: number) => {
    return i === active.value ? '#ffffff' : bgIcons.value[i]
}
let rowClassName = (row: RowData) => {
    return 'row-data'
}

const init = () => {
    let list = [
        { name: "已审核设备", value: 78 },
        { name: "未审核设备", value: 22 },
    ]
    loopPieData.seriesDataList.push(...list)
    let list1 = [], mlist = []
    for (let index = 0; index < 12; index++) {
        let num = Math.floor(Math.random() * (max - min + 1)) + min;
        mlist.push((index+1)+'月')
        list1.push(num)
    }
    funnelData.seriesDataList = [
        { value: 60, name: 'Visit' },
        { value: 40, name: 'Inquiry' },
        { value: 20, name: 'Order' },
        { value: 80, name: 'Click' },
        { value: 100, name: 'Show' }
    ]
    guageData2.seriesDataList = [
        {
        value: 0.6,
        name: '审核进度',
        color: '#fefefe'
        }
    ]
    guageData.seriesDataList = [
        {
        value: 0.7,
        name: '设备总损耗',
        color: '#fefefe'
        }
    ]
    bpData.seriesDataList = [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
    ]
    slaData.xAxisDataList = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    slaData.seriesDataList = [
        [140, 232, 101, 264, 90, 340, 250],
        [120, 282, 111, 234, 220, 340, 310],
        [320, 132, 201, 334, 190, 130, 220],
        [220, 402, 231, 134, 190, 230, 120],
        [220, 302, 181, 234, 210, 290, 150]
    ]
    stackBarData.xAxisDataList.push(...mlist)
    stackBarData.seriesDataList = [
        {
            name: '设备A',
            data: list1
        },
        {
            name: '设备B',
            data: list1
        },
        {
            name: '设备C',
            data: list1
        }
    ].map(m => {
        m['type'] = 'bar'
        m['stack'] = 'total'
        m['label'] = { show: true }
        m['emphasis'] = {focus: 'series'}
        return m
    })
    let tlist = []
    columns = createColumns()
    for (let index = 0; index < 10; index++) {
        let obj = {
            key: index,
            name: '设备名称'+index,
            type: index%2 === 0 ? "大型设备":"小型设备",
            address: '中国的硅谷 贵州省威宁县二塘镇下辖村 贵州铜仁市印江县杨柳镇中山村 贵州遵义余庆县子营街道中关村'+index,
            tags: index%2 === 0 ? ["已审核，已入库"] : ["未审核"],
        }
        tlist.push(obj)
    }
    data.push(...tlist)
    show.value = true
}
init()
</script>

<style scoped>
.page-bg {
    width: 100%;
    min-height: 100vh;
    background-color: #383f49;
    color: #fff;
}
.header {
    width: 100%;
    height: 50px;
    border: 1px solid #1d89e4;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #1d89e4;
}
.header-two {
    width: 100%;
    height: 50px;
    border: 1px solid #273238;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #273238;
    margin-top: -8px;
}
.header-two-title {
    padding-left: 20px;
}
.head-left {
    width: 75%;
    position: relative;
}
.head-left section {
    margin-right: 100px;
}
.head-right {
    width: 25%;
    height: 50px;
    background-color: #2071e4;
}
.text-btn {
    margin-right: 50px;
    font-size: 14px;
}
.main-box {
    margin: 10px 20px;
}
.main-first,
.main-second,
.main-third,
.main-fourth,
.main-firth {
    width: 100%;
    margin-bottom: 16px;
}
.card-info {
    width: 100%;
    height: 100px;
    line-height: 100px;
    border-radius: 8px;
    text-align: center;
    padding-left: 40px;
    font-size: 22px;
    background-color: #fd4b6d;
}
.card-info2 {
    width: 100%;
    height: 100px;
    line-height: 100px;
    border-radius: 8px;
    text-align: center;
    padding-left: 40px;
    font-size: 22px;
    background-color: #26c7db;
}
.num-text span:first-child {
    font-size: 28px;
    font-weight: 600;
}
.num-text span:last-child {
    font-size: 16px;
}
.main-first-text {
    width: 100%;
    height: 208px;
    padding: 10px 15px;
    background-color: #273238;
    border-radius: 8px;
}
.main-first-head {
    width: 100%;
    height: 20px;
    text-align: left;
    font-size: 14px;
    margin-bottom: 10px;
}
.main-first-row {
    font-size: 12px;
    color: #536269;
    border-bottom: 1px solid #536269;
    padding: 5px 0;
}
.main-first-row p { 
    position: relative;
    padding-left: 20px; 
}
.main-first-row p:first-child::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: #536269;
    position: absolute;
    left: 0;
    margin: 5px 10px 5px 0;
    transform: scale(0.8);
}
.main-second-one {
    background-color: #273238;
    padding: 15px;
    border-radius: 8px;
}
.quick-box {
    width: 100%;
    height: 80px;
    background-color: #273238;
    border-radius: 8px;
}
.quick-box section:first-child {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color: #fff;
    margin: 0 10px 0 30px;
}
.quick-active-box {
    width: 100%;
    height: 80px;
    background-color: #1d89e4;
    border-radius: 8px;
}
.sub-text {
    font-size: 12px;
    margin-top: -5px;
    line-height: 1;
}
.row-four {
    width: 100%;
    min-height: 80px;
    background-color: #273238;
    border-radius: 8px;
}
/* :deep(.n-icon) {
    margin-right: 5px;
} */
.row-data {
    background-color: #16495c;
    color: '#ff0000'
}

:deep(.row-data td) {
    background-color: #273238;
    color: #fefefe;
    border-bottom: 1px solid #273238;
}
:deep(.n-data-table .n-data-table-th) {
    background-color: #273238;
    color: #fefefe;
    border-bottom: 1px solid #004453;
}
:deep(.n-data-table.n-data-table--bottom-bordered .n-data-table-td.n-data-table-td--last-row) {
    border: 1px solid #273238;
}
:deep(.n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td) {
    background-color: #273238;
    color: #fefefe;
}
</style>
